<template>
  <div class="container mx-auto px-4 py-6">
    <!-- Back button and title -->
    <div class="flex items-center space-x-4 mb-6">
      <button 
        class="p-2 text-gray-500 hover:text-primary transition-custom"
        @click="$router.back()"
      >
        <i class="fa fa-arrow-left text-xl"></i>
      </button>
      <h2 class="text-[clamp(1.5rem,3vw,2rem)] font-bold text-gray-800">研究成果详情</h2>
    </div>

    <div v-if="achievement" class="grid grid-cols-1 lg:grid-cols-3 gap-6">
      <!-- Main Content -->
      <div class="lg:col-span-2">
        <div class="bg-white rounded-xl shadow-custom">
          <!-- Header -->
          <div class="p-6 border-b border-gray-100">
            <div class="flex items-center justify-between">
              <div>
                <div class="flex items-center space-x-3">
                  <span 
                    :class="getTypeClass(achievement.type)"
                    class="px-3 py-1 text-sm rounded-full"
                  >
                    {{ getTypeText(achievement.type) }}
                  </span>
                  <span class="text-gray-500">{{ achievement.date }}</span>
                </div>
                <h1 class="mt-3 text-2xl font-bold text-gray-800">{{ achievement.title }}</h1>
              </div>
              <div class="flex items-center space-x-2">
                <el-button 
                  type="text"
                  @click="$router.push(`/achievements/${achievement.id}/edit`)"
                >
                  <i class="fa fa-edit text-primary"></i>
                </el-button>
              </div>
            </div>
            <div class="mt-4 flex items-center space-x-4 text-sm text-gray-500">
              <div class="flex items-center space-x-1">
                <i class="fa fa-user"></i>
                <span>{{ achievement.author || '未知作者' }}</span>
              </div>
              <div class="flex items-center space-x-1">
                <i class="fa fa-clock"></i>
                <span>{{ achievement.updateTime || achievement.date }}</span>
              </div>
              <div v-if="achievement.journal" class="flex items-center space-x-1">
                <i class="fa fa-book"></i>
                <span>{{ achievement.journal }}</span>
              </div>
            </div>
          </div>

          <!-- Content -->
          <div class="p-6">
            <!-- Abstract -->
            <div v-if="achievement.abstract" class="mb-8">
              <h3 class="text-lg font-semibold text-gray-800 mb-3">摘要</h3>
              <div class="bg-gray-50 p-4 rounded-lg text-gray-600">
                {{ achievement.abstract }}
              </div>
            </div>

            <!-- Main Content -->
            <div class="prose max-w-none">
              <div v-if="achievement.type === 'paper'" class="space-y-6">
                <section v-if="achievement.introduction">
                  <h3 class="text-lg font-semibold text-gray-800 mb-3">引言</h3>
                  <p class="text-gray-600 whitespace-pre-line">{{ achievement.introduction }}</p>
                </section>
                
                <section v-if="achievement.methods">
                  <h3 class="text-lg font-semibold text-gray-800 mb-3">研究方法</h3>
                  <p class="text-gray-600 whitespace-pre-line">{{ achievement.methods }}</p>
                </section>

                <section v-if="achievement.results">
                  <h3 class="text-lg font-semibold text-gray-800 mb-3">研究结果</h3>
                  <p class="text-gray-600 whitespace-pre-line">{{ achievement.results }}</p>
                </section>

                <section v-if="achievement.conclusion">
                  <h3 class="text-lg font-semibold text-gray-800 mb-3">结论</h3>
                  <p class="text-gray-600 whitespace-pre-line">{{ achievement.conclusion }}</p>
                </section>
              </div>

              <div v-else-if="achievement.type === 'patent'" class="space-y-6">
                <section v-if="achievement.technicalField">
                  <h3 class="text-lg font-semibold text-gray-800 mb-3">技术领域</h3>
                  <p class="text-gray-600 whitespace-pre-line">{{ achievement.technicalField }}</p>
                </section>

                <section v-if="achievement.background">
                  <h3 class="text-lg font-semibold text-gray-800 mb-3">背景技术</h3>
                  <p class="text-gray-600 whitespace-pre-line">{{ achievement.background }}</p>
                </section>

                <section v-if="achievement.summary">
                  <h3 class="text-lg font-semibold text-gray-800 mb-3">发明内容</h3>
                  <p class="text-gray-600 whitespace-pre-line">{{ achievement.summary }}</p>
                </section>

                <section v-if="achievement.description">
                  <h3 class="text-lg font-semibold text-gray-800 mb-3">具体实施方式</h3>
                  <p class="text-gray-600 whitespace-pre-line">{{ achievement.description }}</p>
                </section>
              </div>

              <div v-else class="space-y-6">
                <section v-if="achievement.content">
                  <p class="text-gray-600 whitespace-pre-line">{{ achievement.content }}</p>
                </section>
              </div>
            </div>

            <!-- Keywords -->
            <div v-if="achievement.keywords?.length" class="mt-8">
              <h3 class="text-lg font-semibold text-gray-800 mb-3">关键词</h3>
              <div class="flex flex-wrap gap-2">
                <span 
                  v-for="keyword in achievement.keywords" 
                  :key="keyword"
                  class="px-3 py-1 bg-gray-100 text-gray-600 rounded-full text-sm"
                >
                  {{ keyword }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- Sidebar -->
      <div class="lg:col-span-1 space-y-6">
        <!-- Related Plant -->
        <div class="bg-white rounded-xl shadow-custom p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">相关植物</h3>
          <div v-if="achievement.plant" class="flex items-center space-x-4">
            <img 
              :src="achievement.plant.image || 'https://picsum.photos/100/100'" 
              :alt="achievement.plant.name"
              class="w-16 h-16 rounded-lg object-cover"
            >
            <div>
              <h4 class="font-medium text-gray-800">{{ achievement.plant.name }}</h4>
              <p class="text-sm text-gray-500">{{ achievement.plant.scientificName }}</p>
              <el-button 
                type="text" 
                class="mt-1 p-0"
                @click="$router.push(`/plants/${achievement.plant.id}`)"
              >
                查看详情
                <i class="fa fa-arrow-right ml-1"></i>
              </el-button>
            </div>
          </div>
        </div>

        <!-- Attachments -->
        <div class="bg-white rounded-xl shadow-custom p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">附件</h3>
          <div v-if="achievement.attachments?.length" class="space-y-3">
            <div 
              v-for="file in achievement.attachments" 
              :key="file.id"
              class="flex items-center justify-between p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-custom"
            >
              <div class="flex items-center space-x-3">
                <i class="fa" :class="getFileIcon(file.type)"></i>
                <span class="text-gray-700">{{ file.name }}</span>
              </div>
              <el-button 
                type="text"
                size="small"
                @click="downloadFile(file)"
              >
                <i class="fa fa-download"></i>
              </el-button>
            </div>
          </div>
          <div v-else class="text-center py-4 text-gray-500">
            暂无附件
          </div>
        </div>

        <!-- References -->
        <div class="bg-white rounded-xl shadow-custom p-6">
          <h3 class="text-lg font-semibold text-gray-800 mb-4">参考文献</h3>
          <div v-if="achievement.references?.length" class="space-y-3">
            <div 
              v-for="(reference, index) in achievement.references" 
              :key="index"
              class="text-sm text-gray-600"
            >
              [{{ index + 1 }}] {{ reference }}
            </div>
          </div>
          <div v-else class="text-center py-4 text-gray-500">
            暂无参考文献
          </div>
        </div>
      </div>
    </div>

    <!-- Loading State -->
    <div v-else-if="loading" class="flex items-center justify-center h-[400px]">
      <el-spinner></el-spinner>
    </div>

    <!-- Error State -->
    <div v-else class="flex items-center justify-center h-[400px] bg-white rounded-xl shadow-custom">
      <div class="text-center">
        <i class="fa fa-exclamation-circle text-4xl text-danger"></i>
        <p class="mt-2 text-gray-500">加载失败，请稍后重试</p>
        <el-button type="primary" class="mt-4" @click="fetchData">重新加载</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AchievementDetail',
  data() {
    return {
      achievement: null,
      loading: true
    }
  },
  async created() {
    await this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true
      try {
        // 模拟 API 调用
        await new Promise(resolve => setTimeout(resolve, 500))
        
        this.achievement = {
          id: this.$route.params.id,
          type: 'paper',
          title: '银杏内酯对阿尔茨海默病的治疗作用研究',
          date: '2024-02-20',
          author: '张三',
          updateTime: '2024-03-15',
          journal: '中国药学杂志',
          abstract: '本研究探讨了银杏内酯在治疗阿尔茨海默病中的作用机制和临床效果。通过系统的实验研究和临床观察，发现银杏内酯能显著改善患者的认知功能和日常生活能力。',
          introduction: '阿尔茨海默病（AD）是一种进行性神经退行性疾病，严重影响患者的生活质量。银杏叶提取物中的银杏内酯被认为具有潜在的治疗作用。本研究旨在探讨银杏内酯对AD患者的治疗效果及其作用机制。',
          methods: '研究方法包括：\n1. 临床试验设计：随机双盲对照试验\n2. 研究对象：60例轻中度AD患者\n3. 干预方案：实验组使用银杏内酯治疗，对照组使用安慰剂\n4. 观察指标：认知功能评分、日常生活能力评分等',
          results: '研究结果显示：\n1. 实验组患者的认知功能显著改善（P<0.05）\n2. 日常生活能力评分提高30%\n3. 不良反应发生率低，安全性好\n4. 长期随访显示治疗效果稳定',
          conclusion: '研究表明，银杏内酯能显著改善AD患者的认知功能和日常生活能力，具有良好的安全性和临床应用价值。建议进一步扩大样本量进行多中心研究。',
          keywords: ['银杏内酯', '阿尔茨海默病', '认知功能', '临床研究'],
          plant: {
            id: 1,
            name: '银杏',
            scientificName: 'Ginkgo biloba',
            image: 'https://picsum.photos/100/100?random=1'
          },
          attachments: [
            {
              id: 1,
              name: '研究数据分析报告.pdf',
              type: 'pdf'
            },
            {
              id: 2,
              name: '实验方案.docx',
              type: 'word'
            },
            {
              id: 3,
              name: '数据统计表.xlsx',
              type: 'excel'
            }
          ],
          references: [
            'Smith J, et al. Ginkgo biloba in Alzheimer's treatment. J Neurology. 2023',
            'Wang L, et al. Clinical effects of ginkgo extract. Chinese J Pharmacology. 2023',
            'Johnson M, et al. Mechanisms of ginkgolides. Neuroscience Review. 2024'
          ]
        }
      } catch (error) {
        console.error('加载失败:', error)
        this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },

    getTypeClass(type) {
      const classes = {
        paper: 'bg-blue-100 text-blue-800',
        patent: 'bg-green-100 text-green-800',
        project: 'bg-yellow-100 text-yellow-800'
      }
      return classes[type] || 'bg-gray-100 text-gray-800'
    },

    getTypeText(type) {
      const texts = {
        paper: '论文',
        patent: '专利',
        project: '项目'
      }
      return texts[type] || type
    },

    getFileIcon(type) {
      const icons = {
        pdf: 'fa-file-pdf text-red-500',
        word: 'fa-file-word text-blue-500',
        excel: 'fa-file-excel text-green-500',
        image: 'fa-file-image text-purple-500'
      }
      return icons[type] || 'fa-file text-gray-500'
    },

    async downloadFile(file) {
      // 实现文件下载逻辑
      this.$message.info('文件下载功能开发中...')
    }
  }
}
</script>

<style scoped>
.transition-custom {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.shadow-custom {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.prose {
  max-width: 65ch;
  margin: 0 auto;
}

.prose h3 {
  margin-top: 1.5em;
  margin-bottom: 0.5em;
}

.prose p {
  margin-top: 1em;
  margin-bottom: 1em;
}
</style> 